#岗位推荐
<route lang="yaml">
meta:
  layout: layout_fc
</route>

<script  lang="ts">
import job_item from "@/store/job_item";
import {ref} from "vue";

let isInterested = ref(false);

const toggleInterest = () => {
  isInterested.value = !isInterested.value;
};


import recommend_list from '../store/recommend_list.js';

export default {
  setup() {
    return {
      recommend_list,
      toggleInterest,
      isInterested,
      job_item,
    };
  }
};
</script>



<template>
  <v-card class="mt-5 overflow-y-auto" height="75vh">
    <template v-if="recommend_list && recommend_list.length">

        <v-card class="mb-4" prepend-avatar="@/assets/index/avatar.jpg" title="李女士" subtitle="XXXXX" width="100%" elevation="1">
          <template v-slot:title>
            <v-row>
              <v-col>
                {{ job_item.岗位 }}
              </v-col>
              <v-col>
                {{ job_item.salary }}
              </v-col>
            </v-row>
          </template>
          <v-row><v-col></v-col></v-row>

          <template v-slot:subtitle>
            <v-row>
              <v-col id="position" cols="3">
                <v-icon icon="mdi-map-marker-outline" size="x-small"></v-icon>
                <span>
                  {{ job_item.city }}
                </span>
              </v-col>
              <v-col id="xueli">
                <v-icon icon="mdi-school" size="x-small"></v-icon>
                {{ job_item.education }}
              </v-col>
            </v-row>
          </template>

          <template v-slot:append>
            <v-row>
              <v-col class="text-end">
                <div class="interest-btn">
                  <v-btn :class="{ 'red--text': isInterested }" @click="toggleInterest">
                    <v-icon v-if="isInterested">mdi-heart</v-icon>
                    <v-icon v-else>mdi-heart-outline</v-icon>
                    {{ isInterested ? '不感兴趣' : '感兴趣' }}
                  </v-btn>
                </div>
              </v-col>
              <v-col>
                <v-btn :to="job_item.link.toLowerCase().replace('http://localhost:3000/', '')">
                  立即联系
                </v-btn>
              </v-col>
            </v-row>
          </template>

          <template v-slot:text>
            <v-row>
              <v-col>
                <h2>职位描述：</h2>
              </v-col>
            </v-row>
            <v-row>
              <v-col class="description-box">
                <span class="description-text">{{ job_item.description }}</span>
              </v-col>
            </v-row>
            <v-row>
              <v-col>
                <h2>工作地址：</h2>
              </v-col>
            </v-row>
            <v-row>
              <v-col class="description-box2">
                <span class="address-text">{{ job_item.address }}</span>
              </v-col>
            </v-row>
          </template>
        </v-card>
      </template>
  </v-card>
</template>




<style scoped>

.red--text {
  color: red;
}

.v-card {
  border: none;
  box-shadow: none;
}


.description-box{
  width: 100%; /* 设置宽度 */
  height: 450px; /* 设置固定高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
  padding-right: 10px; /* 为滚动条留出空间 */
}

.description-box2{
  width: 100%; /* 设置宽度 */
  height: 95px; /* 设置高度 */
}


.interest-btn {
  width: 100px; /* 固定宽度 */
  text-align: right; /* 按钮右对齐 */
}

/* 调整职位描述和工作地点内容大小 */
.description-box span.description-text,
.address-text{
  font-size: 18px; /* 小四号字体大小 */
  line-height: 2.0; /* 设置行间距 */
  font-family: "爱奇艺黑体黑体", cursive; /* 设置为楷体 */
}

</style>
